/*
 * @Copyright: Copyright (C) AMCAX, All rights reserved.
 * @Author: 殷建峰
 * @Date: 2025-02-06 10:57:33
 * @LastEditTime: 2025-02-25 15:46:07
 * @LastEditors: 殷建峰
 * @Description:
 */
import CmdGroup from '@/components/CmdBar/CmdGroup';
import styles from './styles.module.scss';
import CmdGroupCheckButton from '@/components/CmdBar/CmdGroupCheckButton';
import { useEffect, useState } from 'react';
import { TCmdGroup } from '@/components/types';
interface IProps {
  cmdGroups: TCmdGroup[];
}
export default function TabContent({ cmdGroups }: IProps) {
  const [groups, setGroups] = useState<TCmdGroup[]>([]);
  useEffect(() => {
    setGroups(cmdGroups);
  }, [cmdGroups]);

  const onCheckChanged = (values: string[]) => {
    cmdGroups.forEach((group) => {
      group.visible = values.includes(group.id);
    });
    setGroups([...cmdGroups]);
  };

  return (
    <div className={styles.tabContent}>
      {groups
        .filter((group) => group.visible)
        .map((cmdGroup) => (
          <CmdGroup
            key={cmdGroup.id}
            cmdLayout={cmdGroup.layout}
            footerLabel={cmdGroup.label}
            footerItems={cmdGroup.menuItems}
          />
        ))}
      <CmdGroupCheckButton
        cmdGroups={cmdGroups}
        onChange={onCheckChanged}
      />
    </div>
  );
}
